<script setup>
	import { onLoad, onPageScroll, onTabItemTap, onShareAppMessage } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	
	const config = getApp().globalData.config
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const menuWidth = ref(0)
	const contHeight = ref(66)
	const headOpacity = ref(0)
	const loading = ref(false)
	const navImg = ref([])
	const curSwiper = ref(0)
	
	function init() {
		getBanner()
	}
	function getBanner() {
		navImg.value = [
			{id: 1, img: 'https://env-00jxtav10wqu.normal.cloudstatic.cn/fengy/zhuxian.png'},
			{id: 2, img: 'https://env-00jxtav10wqu.normal.cloudstatic.cn/fengy/kenan.png'},
		]
	}
	function swiperChange(e) {
		curSwiper.value = e.detail.current
	}
	function openPage(url) {
		if(url) uni.navigateTo({url})
		else uni.showToast({icon: 'none',title: '敬请期待！'})
	}
	
	onLoad(() => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height
		menuWidth.value = menuButtonInfo.left
		contHeight.value = menuButtonInfo.bottom + 10
		// #endif
		init()
	})
	onTabItemTap((e) => {
		if(e.index === 0 && e.text === '回顶部') {
			uni.startPullDownRefresh()
		}
	})
	onPageScroll((e) => {
		headOpacity.value = e.scrollTop > 120 ? 1 : e.scrollTop / 120
		if(e.scrollTop > 400) {
			uni.setTabBarItem({
				index: 0,
				text: '回顶部',
				selectedIconPath: 'static/images/tabbar/back.png'
			})
		} else {
			uni.setTabBarItem({
				index: 0,
				text: '首页',
				selectedIconPath: 'static/images/tabbar/home_.png'
			})
		}
	})
	onShareAppMessage(() => {
		return {
			title: config.appInfo.name,
			path: '/pages/tabbar/index',
			imageUrl: config.appInfo.logo
		}
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head" :style="{backgroundColor: 'rgba(254, 109, 93, ' + headOpacity.toFixed(1) + ')', height: contHeight + 'px'}">
			<view :style="{ height: statusHeight + 'px' }"></view>
			<view class="head-box" :style="{height: menuHeight + 'px',width: menuWidth? menuWidth + 'px' : '100%'}">
				<uv-icon name="scan" color="#FFFFFF" :size="menuHeight + 'px'" @click="scanQrcode" />
				<view class="search-box theme-btn" @click="search">
					<uv-icon name="search" color="#5B5B5B" size="40" />
					<input type="text" placeholder="搜索商品名称" disabled class='input-text' />
				</view>
			</view>
		</view>
		<view class="app-content">
			<view class="nav-box">
				<swiper class="nav-swipe" circular autoplay @change="swiperChange">
					<swiper-item v-for="item in navImg" :key="item.id">
						<image :src="item.img" class="image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="dot-box">
					<view :class="['dot-item', curSwiper == index? 'active' : '' ]" v-for="(item, index) in navImg" :key="item.bannerId"></view>
				</view>
			</view>
			<view class="content-box">
				<uv-button type="primary" shape="circle" text="登 录" @click="openPage('/pages/login')"></uv-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-head {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 10;
			padding-bottom: 10px;
			.head-box {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				gap: 24rpx;
				.search-box{
					flex: 1;
					height: 100%;
					padding: 12rpx;
					display: flex;
					align-items: center;
					gap: 6rpx;
					background-color: #FFFFFF;
					border-radius: 72rpx;
					.input-text{
						flex: 1;
					}
				}
			}
		}
		.app-content{
			padding-bottom: 24rpx;
		}
		.nav-box{
			position: relative;
			.nav-swipe{
				height: 524rpx;
				.image {
					width: 100%;
					height: 100%;
				}
			}
			.dot-box{
				position: absolute;
				z-index: 10;
				left: 0;
				bottom: 40rpx;
				width: 100%;
				height: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
				.dot-item{
					width: 10rpx;
					height: 10rpx;
					background-color: rgba(255, 255, 255, 0.5);
					border-radius: 10rpx;
					&.active{
						width: 40rpx;
						background-color:  #FFFFFF;
					}
				}
			}
		}
		.content-box{
			padding: 32rpx;
		}
	}
</style>